import '@nutui/nutui-react/dist/style.css';

import { Outlet, useNavigate } from 'react-router-dom';
import { Tabbar } from '@nutui/nutui-react';
import { Cart, Category, Home, User } from '@nutui/icons-react';
import { useState } from 'react';

const App = () => {
  const navigate = useNavigate();
  const [activeIndex, setActiveIndex] = useState(0);


  return (
    <div style={{ paddingBottom: '50px', minHeight: '100vh', position: 'relative' }}>

      <Outlet/>
      <Tabbar
        value={activeIndex}
        onSwitch={(value) => {
          setActiveIndex(value);
          switch (value) {
            case 0:
              navigate('/home');
              break;
            case 1:
              navigate('/Type');
              break;
            case 2:
              navigate('/cars');
              break;
            case 3:
              navigate('/My');
              break;
            default:
              break;
          }
        }}
        style={{ position: 'fixed', bottom: 0, width: '100%', zIndex: 100 }}
      >
        <Tabbar.Item title="首页" icon={<Home width={20} height={20} />} />
        <Tabbar.Item title="分类" icon={<Category width={20} height={20} />} />
        <Tabbar.Item title="购物车" icon={<Cart width={20} height={20} />} />
        <Tabbar.Item title="我的" icon={<User width={20} height={20} />} />
      </Tabbar>

    </div>
  );
};

export default App;
